import React, { Component } from 'react'
import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile';

import './index.scss'
import { getCurrentCity } from '../../utils'
import { getList, getGroups, getNews } from '../../api/index'

import SearchHeader from '../../components/SearchHeader'

import Img1 from '../../assets/images/nav-1.png'
import Img2 from '../../assets/images/nav-2.png'
import Img3 from '../../assets/images/nav-3.png'
import Img4 from '../../assets/images/nav-4.png'


// 导航菜单的数据
const navs = [{
    id: 0,
    img: Img1,
    title: '整租',
    path: '/home/list'
}, {
    id: 1,
    img: Img2,
    title: '合租',
    path: '/home/list'
}, {
    id: 2,
    img: Img3,
    title: '地图找房',
    path: '/map'
}, {
    id: 3,
    img: Img4,
    title: '去出租',
    path: '/home/list'
}]

const urlHttp = 'https://github.com/2531800823'


export default class index extends Component {
    state = {
        // 轮播图状态
        swipers: [],
        // 首次空 轮播图不会动，高度没有，数据请求到在显示
        isSwiper: false,
        imgHeight: 212,
        // 租房小组状态
        groups: [],
        // 最新资讯
        news: [],
        cityName: '郑州',
    }
    componentDidMount() {
        this.getList()
        this.getGroups()
        this.getNews()

        // // 获取当前城市
        getCurrentCity().then(res => {
            this.setState({
                cityName: res.label
            })
        }).catch(err => console.log(err))
    }

    // 获取轮播图
    async getList() {
        const { data } = await getList()
        this.setState({
            swipers: data.body,
            isSwiper: true,
        })
    }

    // 获取租房小组的数据
    async getGroups() {
        const { data } = await getGroups({ area: 'AREA|88cff55c-aaa4-e2e0' })
        this.setState({
            groups: data.body
        })
    }

    // 获取最新资讯数据
    async getNews() {
        const { data } = await getNews({ area: 'AREA|88cff55c-aaa4-e2e0' })
        this.setState({
            news: data.body
        })
    }


    // 渲染轮播图
    renderSwipers() {
        return this.state.swipers.map(item =>
            <a
                key={item.id}
                href={urlHttp}
                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
            >
                <img
                    src={`http://localhost:8080${item.imgSrc}`}
                    alt=""
                    style={{ width: '100%', verticalAlign: 'top' }}
                />
            </a>
        )
    }

    // 渲染轮播图下布局
    renderFlexImg() {
        return navs.map(item => (

            <Flex.Item key={item.id} onClick={() => this.props.history.push(item.path)}>
                <img src={item.img} alt="" />
                <h2>{item.title}</h2>
            </Flex.Item>

        ))
    }

    // 渲染宫格图
    renderGroups(item) {
        return (
            <Flex className="group-item" justify="around">
                <div className="desc">
                    <p className="title">{item.title}</p>
                    <span className="info">{item.desc}</span>
                </div>
                <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
            </Flex>
        )
    }


    // 渲染最新资讯
    renderNews() {
        return this.state.news.map(item => {
            return <div className="news-item" key={item.id}>
                <div className="imgwrap">
                    <img
                        className="img"
                        src={`http://localhost:8080${item.imgSrc}`}
                        alt=""
                    />
                </div>
                <Flex className="content" direction="column" justify="between">
                    <h3 className="title">{item.title}</h3>
                    <Flex className="info" justify="between">
                        <span>{item.from}</span>
                        <span>{item.date}</span>
                    </Flex>
                </Flex>
            </div>
        })
    }

    render() {
        return (
            <div className="index" >
                {
                    this.state.isSwiper ? <Carousel
                        autoplay={true}
                        infinite
                        autoplayInterval='2000'
                    >
                        {/* 调用渲染轮播图的方法 */}
                        {this.renderSwipers()}
                    </Carousel> : ''
                }

                <SearchHeader cityName={this.state.cityName} />



                {/** 导航菜单 */}
                <Flex className="nav">
                    {this.renderFlexImg()}
                </Flex>


                {/* 租房小组 */}
                <div className="group" >
                    <h3 className="group-title">
                        租房小组 <span className="more">更多</span>
                    </h3>
                    <Grid data={this.state.groups} activeStyle={false} columnNum={2} square={false} hasLine={false} renderItem={item => this.renderGroups(item)} />
                </div>

                {/** 最新资讯 */}
                <div className="news">
                    <h3>最新资讯</h3>
                    <WingBlank size="md">{this.renderNews()}</WingBlank>
                </div>
            </div>
        );
    }
}
